<style lang="less">
  @import './login.less';
</style>

<template>
  <div class="login">

    <div class="login-body">
      <div class="login-module">
        <div class="form-ig">
          <img src="../../assets/images/login.png" />
        </div>
        <div class="form-table">
          <div class="login-cn">

              <div class="form-con">
                <div class="title">瓯品商城管理后台</div>
                <div class="child-title">欢迎回来~</div>
                <login-form @on-success-valid="handleSubmit"></login-form>
              </div>
               <!--  <button @click="getPort()" >request serial port</button>

                <button @click="test()" >测试vuex数据</button> -->
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  import LoginForm from '_c/login-form'
  import routers from '@/router/routers'
  import {endRouter} from '@/router/routers'//404页面
  import router from '../../router/index.js'
  import {addrouteFun} from '../../config/publicTool.js'//动态添加路由
  import {
    loadMenu
  } from '@/libs/router-util' //路由
  import {
    mapActions,
    mapState,
    mapMutations
  } from 'vuex'

  export default {
    components: {
      LoginForm
    },

    created() {
      // this.setDevState(true);
      // console.log(this.devState)


    },
    computed: {
      ...mapState({
        devState: state => state.share.devState
      })
    },
    methods: {
      ...mapActions([
        'handleLogin'
      ]),
      ...mapMutations([
        'setDevState'
      ]),
      test(){
        console.log(this.devState)
      },
      async getPort(){
        if('serial' in navigator)
        {
          console.log('yes')
          const port = await navigator.serial.requestPort()
          const ports = await navigator.serial.getPorts()
          this.setDevState(ports);
          // console.log(ports)
          this.open1(port)
          console.log('start')
        }
      },
      async open1(ports){

       await ports.open({
          baudRate:100,
          dataBits:8,
          stopBits:1,
          parity:'none',
          flowControl:'none' //流控模式(none或hardware)
        })
        console.log('串口打开成功')





        const read = ports.readable.getReader()
           let key = 0
           let test = [];
        while(true){
          const {value,done} =await read.read()
          console.log(done)
          if(done){
            // reader.releaseLock();
            break;
          }
          key++
          console.log(value)
          console.log('第'+key+'位',this.buffertoHex(value))
          test.push(this.buffertoHex(value))
          console.log(test)
        }
        console.log('end')
        ports.close()
      },
     uint8Array(uint8Array) {
     return Array.prototype.map
       .call(uint8Array, (x) => ('0x' + x.toString(16)).slice(-2))
       .join('');
    },
      buffertoHex(buffer,key=0) {
        let b = new Uint8Array(buffer)
        return this.inttoHex(b[key])
      },
      inttoHex(num) {

	// return parseInt(("0" + (Number(num).toString(16))).slice(-2).toUpperCase(), 16)
	//转
	// return ("0" + (Number(num).toString(16))).slice(-2).toUpperCase()
        return "0x"+("0" + (Number(num).toString(16))).slice(-2).toUpperCase()
      },
      handleSubmit({
        username,
        pwd
      }) {
        let _this=this;
        this.handleLogin({
          username,
          pwd
        }).then(res => {

          // 登录成功之后，addRoute动态添加路由,后面追加的404页面也需要生成
          let back =[...loadMenu(),...endRouter];
          addrouteFun(back)

          if (res.mainUrl == 'home' || !res.mainUrl) {
            this.$router.push({
              path: '/'
            }).catch(()=>{});
          } else {
            this.$router.push({
              path: res.mainUrl
            }).catch(()=>{});
          }

        })
      }

    }
  }
</script>

<style>
  .login-cn {
    margin-top: 70px;
  }

  .login-cn .ivu-card-head span {
    font-size: 16px;
    color: #69A4FE;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .login-cn .ivu-card-head {
    border: none;
  }
</style>
